<template>
	<div>
		
		<ul class="mui-table-view">
				<li class="mui-table-view-cell mui-media" v-for="item in newslist" :key="item.author">
					<!-- 此处因为要传参，所以to属性前面要加:，并且前面的路径要加引号 -->
					<router-link :to="'/home/NewsInfo/' + item.author">
						<img class="mui-media-object mui-pull-left" :src="item.book_cover">
						<div class="mui-media-body">
							<h1>{{item.author_name}}</h1>
							<p class='mui-ellipsis'>
								<span>发表时间：{{item.date_updated | dateFormat}}</span>
								<span>点击：{{item.bid}}次</span>
							</p>
						</div>
					</router-link>
				</li>
				

			</ul>

	</div>
</template>

<script>

	import {Toast} from "mint-ui";

	export default{
		data(){
			return{
				newslist:[] //新闻列表
			}
		},
		created(){
			this.getNewsList()
		},
		methods:{
			getNewsList(){ //获取新闻列表
				this.$http.get('https://www.apiopen.top/novelApi').then(result => {
					//console.log(result);
					if (result.body.code = 200) {
						//如果没有失败，应该把数据保存到 data 上
						this.newslist = result.body.data;
					}else {
						Toast('获取新闻列表失败')
					}
				});
				
			}
		}
	};
	
</script>

<style lang="scss" scoped>

.mui-table-view{
	li{
		h1{
			font-size: 14px;
		}
		.mui-ellipsis{
			font-size: 12px;
			color: #226aff;
			//使p标签下的两个span 标签 两端对齐
			display: flex;
			justify-content: space-between;
		}
	}
}
	
</style>